<template>
    <el-form-item label="数据格式">
        <el-select v-model="optionModel.valueFormat" placeholder="">
            <el-option 
                v-for="item in state.options"
                :key="item"
                :label="item"
                :value="item"
            />
        </el-select>
    </el-form-item>
</template>

<script setup>
import { reactive ,computed,watchEffect } from 'vue';

defineOptions({
    name:"valueFormat-editor"
})

const props = defineProps({
    optionModel:{
        type:Object,
        required:true
    },
    selectWidget:{
        type:Object,
        default:()=>({})    
    },
})

const state = reactive({
    options:[]
})

const type  = computed(()=>props.selectWidget.type)

const initOptions = ()=>{
    switch(type.value){
        case 'time':
        case 'time-range':
            state.options = [
                    "HH:mm:ss",
                    "HH时mm分ss秒"
            ]
            break
        case 'date':
        case 'date-range':
                state.options = [
                    'YYYY-MM-DD',
                    'YYYY/MM/DD',
                    'YYYY年MM月DD日',
                    'YYYY-MM-DD HH:mm:ss',
                    'YYYY-MM-DD hh:mm:ss'
                ]
            break
    }
}

watchEffect(()=>{
    type.value
    initOptions()
})


</script>

<style lang='scss' scoped></style>